<template>
  <div>
    <!--搜索-->
    <div class="query-form">
      <el-form ref="form"
               :inline="true"
               :model="queryForm">
        <el-form-item label="部门名称"
                      prop="menuName">
          <el-input v-model="queryForm.menuName"
                    placeholder="请输入部门名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="getDeptAll">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索结束 -->
    <!-- 表格 -->
    <div class="action">
      <el-button type="primary"
                 @click="handleAdd">新增</el-button>
    </div>
    <el-table :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="DId"
              border
              default-expand-all
              :tree-props="{children: 'ChildDepts', hasChildren: 'hasChildren'}">
      <el-table-column v-for="(item,index) in columns"
                       :key="index"
                       :prop="item.prop"
                       :formatter="item.formatter"
                       :label="item.label"
                       :width="item.width">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">新增</el-button>
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 模态 -->
    <!--添加模态-->
    <el-dialog :title="action=='add'?'创建部门':'编辑部门'"
               :visible.sync="showModal">
      <el-form ref="dialogForm"
               :model="deptForm"
               label-width="100px"
               :rules="rules">
        <el-form-item label="上级部门"
                      prop="ParentId">
          <el-cascader v-model="deptForm.ParentId"
                       :options="deptList"
                       :props="{ checkStrictly: true, value: 'DId', label: 'DName',children:'ChildDepts' }"
                       clearable />
          <span>默认为顶级部门</span>
        </el-form-item>
        <el-form-item label="部门名称"
                      prop="DName">
          <el-input v-model="deptForm.DName"
                    placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="负责人"
                      prop="DeptHead">
          <el-select v-model="deptForm.UserId"
                     @change='handleOption'
                     placeholder="请选择">
            <el-option v-for="item in userList"
                       :key="item.UserId"
                       :label="item.NickName"
                       :value="item.UserId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱">
          <el-input v-model="email"
                    :disabled="true">
          </el-input>

        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary"
                     @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 模态结束 -->
  </div>
</template>

<script>
import $http from '../../request/http'
export default {
  name: 'rolemenu',
  data() {
    return {
      tableData: [],
      deptList: [], //上级部门列表
      userList: [], //负责人列表
      email: '', //默认邮箱地址
      action: '',
      showModal: false, //模态
      deptForm: {
        //模态表单
        ParentId: [0],
        DName: '',
        UserId: '',
      },
      rules: {
        menuName: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 10,
            message: '长度在2-8个字符',
            trigger: 'blur',
          },
        ],
      },
      queryForm: {
        //查询
        menuState: 1,
      },
      columns: [
        {
          label: '部门名称',
          prop: 'DName',
        },
        {
          label: '负责人',
          prop: 'LeadName',
        },
        {
          label: '更新时间',
          prop: 'UpdatedTime',
        },
        {
          label: '创建时间',
          prop: 'CreatedTime',
        },
      ],
    }
  },
  methods: {
    getDeptAll() {
      //获取部门数据

      $http.get(`/Dept/depttree/`).then((res) => {
        this.tableData = res.data.Data
        this.deptList = res.data.Data
      })
    },
    getUserAll() {
      $http.get(`/User/page/1000/1`).then((res) => {
        this.userList = res.data.PageData
      })
    },
    //选择负责人显示邮箱地址
    handleOption(user) {
      this.email = this.userList.filter((u) => u.UserId == user)[0].Email
    },
    // 新增菜单
    handleAdd() {
      this.showModal = true
      this.action = 'add'
      this.email = ''
    },
    // 菜单操作-提交
    handleSubmit() {
      if (this.deptForm.ParentId!=0) {
           this.deptForm.ParentId = this.deptForm.ParentId[this.deptForm.ParentId.length-1] 
      }
     
      $http.post(`Dept/adddept`, this.deptForm).then((res) => {
        if (res.data.Data==1) {
            this.$message.success('添加部门成功');
            this.showModal = false;
            this.getDeptAll();
        }else{
            this.$message.success('添加部门失败');
        }
      })
    },
    // 弹框关闭
    handleClose() {
      this.showModal = false
      this.handleReset('dialogForm')
    },
    // 表单重置
    handleReset(form) {
      this.$refs[form].resetFields()
    },
  },
  created() {
    this.getDeptAll()
    this.getUserAll()
  },
}
</script>

<style lang="scss" scoped>
</style>